<ion-header translucent>
  <ion-toolbar>
    <div class="title_item" (click)="dismissModal()">
      <svg class="pwd_icon" aria-hidden="true">
        <use xlink:href="#iconpage-left"></use>
      </svg>
    </div>
    <ion-title>Select Payment Method</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content scrollY="false">
  <ion-grid fixed class="payment">
    <ion-row>
      <ion-col size="12" class="pay-method-title">
        Recommended Payment Method
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" class="pay-schedule-row">
        <div  class="pay-schedule-item" *ngFor="let paySchedule of paySchedules" 
              [ngClass]="{'pay-schedule-item-active': paySchedule.selected}"  
              (click)="selectPaySchedule(paySchedule.id)">
          <div class="pay-schedule-item-title" *ngIf="paySchedule.isFullPay">Pay in Full</div>
          <div class="fee-item" *ngIf="paySchedule.isFullPay">+{{paySchedule.currencySymbol}}0.00</div>
          <div class="pay-schedule-item-title" *ngIf="!paySchedule.isFullPay">{{paySchedule.currencySymbol}}{{paySchedule.payment}}×{{paySchedule.months}}</div>
          <div class="fee-item" *ngIf="!paySchedule.isFullPay">+{{paySchedule.currencySymbol}}{{paySchedule.fee}}/Payment</div>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" class="pay-item">
        <div class="pay-item-left">
          <ion-icon name="card-outline"></ion-icon>
          <span>CMB Credit Card(0123)</span>
        </div>
        <div>
        <!--   <ion-icon name="radio-button-off-outline"></ion-icon> -->
        <ion-icon name="checkmark-circle"></ion-icon>
        </div>
      </ion-col>
      <ion-col size="12" class="pay-item">
          <div class="pay-item-left">
            <ion-icon name="card-outline"></ion-icon>
            <span>HSBC Credit Card(1234)</span>
          </div>
          <div>
            <ion-icon name="radio-button-off-outline"></ion-icon>
          </div>
        </ion-col>
      <ion-col size="12" class="pay-item">
        <div>
          <!-- <ion-icon name="card-outline"></ion-icon> -->
          <img src="assets/images/ios/card.png" alt="">
          <span>Add a Bank Card</span>
        </div>
        <div>
          <ion-icon name="chevron-forward-outline"></ion-icon>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" class="other-pay-title">Other Payment Methods</ion-col>
      <ion-col size="12" class="pay-item">
        <div class="pay-item-left">
          <ion-icon name="card-outline"></ion-icon>
          <span>Apply Pay</span>
        </div>
        <div>
          <ion-icon name="radio-button-off-outline"></ion-icon>
        </div>
      </ion-col>
      <ion-col size="12" class="pay-item">
        <div class="pay-item-left">
          <ion-icon name="card-outline"></ion-icon>
          <span>PalPay</span>
        </div>
        <div>
          <ion-icon name="radio-button-off-outline"></ion-icon>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
